<template>
  <div>
    <!-- 最外层容器 -->
    <el-container>
      <!-- 左侧边栏容器 -->
      <el-aside width="auto">
        <LeftAside />
      </el-aside>
      <!-- 主体区域容器 -->
      <el-container class="homeContainer">
        <!-- 顶栏容器 -->
        <el-header height="48px">
          <MainHeader></MainHeader>
        </el-header>
        <!-- 主体容器 -->
        <el-main>
          <MainMain></MainMain>
          <br>
          <div class="peroration">人生就像一杯茶，不会苦一辈子，但总会苦一阵子。</div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import MainHeader from "@/views/ViewsMain/Header/App.vue";
import MainMain from "@/views/ViewsMain/Main/App.vue";
import LeftAside from "@/views/LeftAside/App.vue";

export default {
  name: 'ViewsHome',
  components: { MainHeader, MainMain, LeftAside }
};
</script>

<style lang="scss" scoped>
.el-header,
.el-footer {
  background-color: #ccc;
  color: #333;
  // text-align: center;
  // line-height: 48px;
}

// .home
.homeContainer::v-deep .el-header {
  padding: 10px;
}

.el-aside {
  // background-color: #d8e6d3;
  color: #333;
  // text-align: center;
  // line-height: 200px;
  // padding: 0 10px;
}

.el-main {
  position: relative;
  top: 0;
  left: 0;
  text-align: center;
  color: #333;
  background-color: #F8F6F6;
  // line-height: 160px;
}

.peroration {
  margin-bottom: 15px;
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}
</style>
